<template>
  <div>
    echarts
    <div style="height: 80vh" ref="echart">5555</div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineExpose, reactive } from "vue";
import * as echarts from "echarts";

const option = reactive({
  title: {
    text: "Referer of a Website",
    subtext: "Fake Data",
    left: "right",
  },
  tooltip: {
    trigger: "item",
  },
  legend: {
    orient: "vertical",
    left: "left",
  },
  series: [
    {
      name: "Access From",
      type: "pie",
      radius: "50%",
      data: [
        { value: 1048, name: "Search Engine" },
        { value: 735, name: "Direct" },
        { value: 580, name: "Email" },
        { value: 484, name: "Union Ads" },
        { value: 300, name: "Video Ads" },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
});
let echart = ref(null);
let myChartbox;
onMounted(async () => {
  myChartbox = echarts.init(echart.value);
  myChartbox.setOption(option, true);
  console.log(echart.value);

  window.onresize = () => {
    console.log("界面刷新");
    myChartbox.resize();
  };

  setTimeout(() => {
    tubiao();
  }, 3000);
});

function tubiao() {
  let data = [
    { value: 89, name: "Search Engine" },
    { value: 4512, name: "Direct" },
    { value: 12, name: "Email" },
    { value: 484, name: "Union Ads" },
    { value: 5656, name: "Video Ads" },
  ];

  option.series[0].data = data;

  reset();
}

function reset() {
  myChartbox.setOption(option, true);
}
defineExpose({
  reset,
});
</script>

<style></style>
